<template>
  <div class="main">
    <!-- <scroller> -->

    <div class="adOuterWrap">
      <div class="back">
        <headerBack></headerBack>
        <h2>
          生涯测评
          <span class="bsp"></span>
        </h2>
      </div>
      <div class="adWrap">
        <scroller style="top: 1.6rem;">
          <div>
            <div class="adBoxs">
              <div class="listBox">
                <span class="txtBox">
                  <p>请您完成以下 5 项测试，最终报告将根据这 5 项测试为推算依据。</p>
                </span>
                <div class="progressBar flex-h" v-for="(item,index) in sydata" :key="index">
                  <div class="sp1">
                    <span :class="['barTitle',item.type?'barTitleAce':'']">
                      <b v-show="item.type===false">{{item.rank}}</b>
                      <b v-show="item.type">
                        <img src="~/static/iconsvgs/career_synthesize_icon_complete.png" alt />
                      </b>
                    </span>
                    <span class="barLine" v-show="index<4"></span>
                  </div>
                  <div class="sp2 flex1">
                    <div class="spPaBot">
                      <div class="sp2Box flex-h">
                        <div class="flex1 sp2son1">
                          <div class="smSp2Box">
                            <h3>{{item.title}}</h3>
                            <span class="spanptx">
                              <p>{{item.desc}}</p>
                            </span>
                          </div>
                          <button
                            @click="gotos('createTest',item.rank)"
                            :class="['sonbtn1',item.type?'':'btnActive']"
                          >{{item.type?'再次测试':'开始测试'}}</button>
                        </div>
                        <div class="sp2son2">
                          <img v-lazy="item.imgsrc" alt />
                          <button
                            v-show="item.type"
                            class="sonbtn1"
                            @click="gotos('singleRecord',item.rank,item.gos)"
                          >查看报告</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div style="width: 100%;height: 4.1rem;"></div>
          </div>
        </scroller>
        <div class="fixBoter">
          <div class="fix1 flex-h">
            <span class="flex1 sp1">
              <i>测试完成</i>
              <b>{{getNum}}</b>
              <em>/5</em>
            </span>
          </div>
          <div class="fixbtn">
            <button @click="getGoal" :class="getNum===5?'wcl':'nocl'">生成新的综合测试结果</button>
          </div>
        </div>
        <!-- </div> -->
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showLoading" :hide-on-blur="false">
        <div class="loading-wrapper">
          <h2>正在为您生成结果</h2>
          <div class="img-box">
            <img class="img-outer" src="~@/static/images/outer.png" alt />
            <img class="img-inner" src="~@/static/images/inner.png" alt />
            <span>数据分析中</span>
            <b>...</b>
          </div>
        </div>
      </popup>
    </div>
    <!-- <div class="x-vip-buy" v-show='xBuy'>
				<div class="vipBuys">
					<img class="imgIcon" src="~/static/images/volunteer_icon_lock.png" alt="">
					<span class="vipSp">使用该功能，您需要开通升学规划智能服务</span>
					<div class="flex-h vipBtn">
						<span @click='xBuy=false' class="bt1 flex1">取消</span>
						<span class="bt2 flex1" @click="gomall" >去开通</span>
					</div>

				</div> 
		</div> -->
     <BuyVip :xBuy='showBuyVipModle' @handleCloseBuyDialog="showBuyVipModle=false" serverName="生涯测评生成综合评价"></BuyVip>
    <!-- </scroller> -->
  </div>
</template>
<script>
import ls from "store2";
import { TransferDom, Popup } from "vux";
import headerBack from "~/components/headerBack";
import { getEvaluation, saveMultiple } from "~/api/evaluation";
import BuyVip from "~/components/BuyVip";
import { getMyVip } from "~/api/identity";
export default {
  head: {
    title: "生涯测评"
  },
  directives: {
    TransferDom
  },
  components: {
    headerBack,
    Popup,
    BuyVip
    
  },
  data() {
    return {
      showBuyVipModle:false,
      showLoading: false,
      flagCount: 0,
      show1: false,
      isVIP:false,
      sydata: [
        {
          rank: 1,
          title: "职业兴趣测试",
          desc:
            "兴趣是最好的老师，找到自己最感兴趣的事情，为以后的人生奠定方向。",
          imgsrc: require("~/static/images/career_synthesize_pic_1.png"),
          type: false,
          gos: 1
        },
        {
          rank: 2,
          title: "职业价值观测试",
          desc: "每个人对未来的追求都不同，找到未来人生的意义，让生命绽放。",

          imgsrc: require("~/static/images/career_synthesize_pic_2.png"),
          type: false,
          gos: 3
        },
        {
          rank: 3,
          title: "MBTI性格测试",
          desc:
            "性格乃人之行为习惯，辨识自己的性格，找到符合性格的学习方式和未来专业方向",
          imgsrc: require("~/static/images/career_synthesize_pic_3.png"),
          type: false,
          gos: 4
        },
        {
          rank: 4,
          title: "多元智能测试",
          desc: "每个人都是独一无二的，挖掘自己的天赋特长，激发自己无限潜能。",
          imgsrc: require("~/static/images/career_synthesize_pic_4.png"),
          type: false,
          gos: 2
        },
        {
          rank: 5,
          title: "成长环境测试",
          desc:
            "家庭对一个人的成长影响极大，家庭关系的不同直接影响到我们未来的专业和职业选择。",
          imgsrc: require("~/static/images/career_synthesize_pic_5.png"),
          type: false,
          gos: 5
        }
      ],
      getNum: 0,
      ids: 0
    };
  },

  created() {
    // this.commonJs.gologins();
  },
  mounted: function() {
    this.showDanList();
    this.getMyVip()
    // if (this.commonJs.GetUrlParam("pay_status") == "success") {
    //   this.$vux.toast.text("支付成功");
    // } else if (this.commonJs.GetUrlParam("pay_status") == "failed") {
    //   this.$vux.toast.text("支付失败，请重新支付");
    // }
  },

  watch: {},
  methods: {
    gomall(){
    
      let return_url = process.env.workUrl+'/h5-stu-wx/#/evaluation/ad'
      let uri = process.env.mallUrl + '/profile/vip'
      if (this.commonJs.checkTerminal() === "ios") {
        let obj = {
          gourl: uri,
          pay_return_url: return_url
        };
        window.webkit.messageHandlers.goZyMal.postMessage(obj);
      } else {
        window.location.href = uri;
      }

    },
    getMyVip() {
      getMyVip(ls.get('userType')).then(res => {
        console.log('res:vip ', res);
        // console.log(res);
        this.isVIP = res.data.isVIP;
      });
    },
    showDanList() {
      this.$vux.loading.show();
      let obj = {
        userId: ls.get("yxkData").userId,
        userType: ls.get("userType")
      };
      sessionStorage.setItem("checkIsSaveResult", "noSave"); //设置已存有当前记录方案
      getEvaluation(ls.get("userType"))
        .then(res => {
          if (res.code === "0") {
            let adata = res.data;
            let str = "";
            for (var x in adata) {
              str += x;
            }
            if (str.indexOf("interest") > -1) {
              this.sydata[0].type = true;
              this.getNum += 1;
            }
            if (str.indexOf("character") > -1) {
              this.sydata[2].type = true;
              this.getNum += 1;
            }
            if (str.indexOf("grown") > -1) {
              this.sydata[4].type = true;
              this.getNum += 1;
            }
            if (str.indexOf("intelligence") > -1) {
              this.sydata[3].type = true;
              this.getNum += 1;
            }
            if (str.indexOf("worth") > -1) {
              this.sydata[1].type = true;
              this.getNum += 1;
            }
            if (res.data) {
              this.ids = res.data.id;
            }
            this.$vux.loading.hide();
          }
        })
        .catch(error => {
          this.$vux.toast.text(error);
          this.$vux.loading.hide();
        });
    },
    gotos(url, typ, abx) {
      ls.set("testTypes", typ);
      ls.set("preUrl", "../evaluation/evaluationEntry");
      this.commonJs.gopush(url, typ);
    },
    getGoal() {
      this.flagCount += 1;
      if (this.getNum < 5) {
        return false;
      }
      if (this.flagCount === 1) {
        if(!this.isVIP){        
          this.showBuyVipModle = true;
          this.flagCount = 0
          return false;
        }
        this.postZongheGoal();
      }
    },
    postZongheGoal() {
      this.showLoading = true;
      saveMultiple({ generate: 1, id: this.ids, userType: ls.get("userType") })
        .then(res => {
          if (res.code === "0") {
            if (res.message == "操作成功") {
              this.$vux.toast.text("您的结果生成成功");
              setTimeout(() => {
                ls.set("zhId", this.ids);
                ls.set("preUrl", "../evaluation/evaluationEntry");
                this.commonJs.gopush("resultDetails");
              }, 50);
            }
          }
          this.$vux.toast.text(res.message);

          this.showLoading = false;
        })
        .catch(error => {
          this.$vux.toast.text(error);
          this.showLoading = false;
        });
    }
  },
  beforeDestroy() {}
};
</script>
<style scoped lang="less">
.adOuterWrap {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  overflow: hidden;

  .adWrap {
    padding: 0 0.3rem;
    width: 7.5rem;
    box-sizing: border-box;

    .adBoxs {
      width: 100%;
      height: auto;

      .listBox {
        height: auto;
        padding: 0.3rem 0.3rem;
        box-sizing: border-box;

        .txtBox {
          display: block;
          width: 100%;
          height: auto;
          background: rgba(255, 241, 184, 1);
          border-radius: 0.1rem;
          opacity: 0.6;
          text-align: center;
          padding: 0.15rem 0.2rem;
          box-sizing: border-box;
          margin-bottom: 0.3rem;

          p {
            font-size: 0.22rem;
            line-height: 0.3rem;
            font-weight: bold;
            color: rgba(34, 34, 34, 1);
          }
        }

        .progressBar {
          width: 100%;
          height: auto;

          align-items: stretch !important;

          .sp1 {
            width: 0.8rem;

            position: relative;

            .barTitle {
              display: block;
              width: 0.6rem;
              height: 0.6rem;
              background: #fff;
              position: absolute;
              left: 0;
              top: 0;
              z-index: 2;

              b {
                text-align: center;
                display: block;
                width: 0.6rem;
                height: 0.6rem;
                border-radius: 50%;
                border: 0.08rem solid rgba(238, 238, 238, 1);
                box-sizing: border-box;
                font-weight: bold;
                color: rgba(137, 204, 78, 1);
                font-size: 0.28rem;
                font-family: "DIN-Bold";
                line-height: 0.44rem;
              }
            }

            .barTitleAce {
              b {
                border: none;
                background: rgba(137, 204, 78, 1);
                box-shadow: 0px 0.06rem 0.16rem 0px rgba(137, 205, 79, 0.3);
                overflow: hidden;

                img {
                  display: block;
                  width: 0.3rem;
                  height: 0.3rem;
                  margin: 0.15rem auto;
                }
              }
            }

            .barLine {
              position: absolute;
              display: block;
              height: 100%;
              width: 0.1rem;
              background: rgba(238, 238, 238, 1);
              left: 0.25rem;
              top: 0;
              z-index: 1;
            }
          }

          .sp2 {
            width: 100%;
            height: auto;
            align-items: initial !important;
            padding-bottom: 0.3rem;
            overflow: hidden;

            .spPaBot {
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
              border-radius: 0.1rem;

              height: auto;
              box-sizing: border-box;
              width: 98%;
              margin: 0.1rem auto;
            }

            .sp2Box {
              width: 100%;
              height: auto;
              padding: 0.3rem;
              box-sizing: border-box;

              .sp2son1 {
                .smSp2Box {
                  height: 2.2rem;
                }

                h3 {
                  font-size: 0.34rem;

                  font-weight: bold;
                  color: rgba(34, 34, 34, 1);
                  line-height: 0.48rem;
                }

                .spanptx {
                  display: block;
                  padding-bottom: 0.2rem;
                  margin-top: 0.2rem;

                  p {
                    font-size: 0.24rem;

                    font-weight: 500;
                    color: rgba(153, 153, 153, 1);
                    line-height: 0.33rem;
                  }
                }
              }

              .sp2son2 {
                width: 2.6rem;

                img {
                  display: block;
                  border: none;
                  width: 1.7rem;
                  height: 1.7rem;
                  margin-left: 0.6rem;
                  margin-bottom: 0.5rem;
                }
              }

              .sonbtn1 {
                width: 2.6rem;
                height: 0.7rem;
                border-radius: 0.1rem;
                border: 0.02rem solid @mainColor;
                outline: none;
                text-align: center;
                line-height: 0.7rem;
                font-size: 0.26rem;
                font-weight: bold;
                color: @mainColor;
                background: none;
              }

              .btnActive {
                background: @mainColor;
                box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
                color: rgba(255, 255, 255, 1);
              }
            }
          }
        }
      }
    }
  }
}

.back {
  width: 100%;
  height: auto;

  h2 {
    padding: 0 0.3rem;
    box-sizing: border-box;
    display: block;
    height: 0.8rem;
    font-size: 0.44rem;

    font-weight: bold;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;

    .bsp {
      float: right;
      font-size: 0.26rem;
      color: #89cc4e;
    }
  }
}

.fixBoter {
  width: 7.5rem;
  height: 2.1rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -0.04rem 0.1rem 0px rgba(204, 204, 204, 0.2);
  z-index: 3;

  .fix1 {
    width: 100%;
    height: 1rem;
    padding: 0 0.9rem 0 0.3rem;
    box-sizing: border-box;

    .sp1 {
      i {
        font-size: 0.26rem;
        font-weight: bold;
        color: rgba(34, 34, 34, 1);
      }

      b {
        font-size: 0.4rem;
        font-weight: bold;
        color: @mainColor;
        margin-left: 0.15rem;
      }

      em {
        font-size: 0.22rem;
        font-weight: bold;
        color: rgba(187, 187, 187, 1);
      }
    }

    .sp2 {
      text-align: right;

      i,
      b {
        font-size: 0.26rem;
        font-weight: bold;
        color: rgba(187, 187, 187, 1);
      }

      b {
        margin-left: 0.15rem;
      }
    }
  }

  .fixbtn {
    height: 0.8rem;
    width: 7.5rem;

    button {
      display: block;
      outline: none;
      border: none;
      height: 0.8rem;
      border-radius: 0.1rem;
      line-height: 0.8rem;

      padding: 0 0.5rem;
      font-size: 0.3rem;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
      margin: 0 auto;
    }

    .wcl {
      background: @mainColor;
    }

    .nocl {
      background: #eee;
    }
  }

  // filter:blur(0.2rem);
}

.loading-wrapper {
  width: 100%;
  height: 7.5rem;
  border-top-right-radius: 0.2rem;
  border-top-left-radius: 0.2rem;
  background: #fff;
  overflow: hidden;
  h2 {
    text-align: center;
    font-size: 0.32rem;
    margin-top: 1rem;

    font-family: PingFangSC;
    font-weight: 600;
    color: #222;
  }
  .img-box {
    width: 3.8rem;
    height: 3.8rem;
    margin: 1rem auto;
    position: relative;
    span,
    b,
    img {
      position: absolute;
    }
    .img-outer {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      -webkit-animation: rotateing 1s steps(12, end) infinite;
      animation: rotateing 1s steps(12, end) infinite;
    }
    .img-inner {
      width: 3.5rem;
      height: 3.5rem;
      left: 0.15rem;
      top: 0.15rem;
    }
    span,
    b {
      text-align: center;
      font-size: 0.32rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: #80d566;

      display: block;
      width: 100%;
    }
    span {
      top: 1.3rem;
    }
    b {
      top: 1.8rem;
    }
    @keyframes rotateing {
      0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
      }
      100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
      }
    }
  }
}


.x-vip-buy {
		position: fixed;
		width: 7.5rem;
		height: 100vh;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 4;

		.vipBuys {
			width: 5rem;
			height: auto;
			border-radius: 0.1rem;
			background: #fff;
			margin: 25vh auto;
			overflow: hidden;

			.imgIcon {
				display: block;
				width: 1.2rem;
				height: 1.2rem;
				margin: 0.5rem auto 0.2rem;
			}

			.vipSp {
				display: block;
				height: auto;
				padding: 0 0.5rem;
				font-size: 0.3rem;
				color: rgba(108, 191, 32, 1);
				line-height: 0.4rem;
				text-align: center;
				font-weight: bold;
				box-sizing: border-box;
			}

			.vipBtn {
				width: 100%;
				padding: 0 0.5rem;
				margin: 1rem auto 0.5rem;

				.bt1,
				.bt2 {
					height: 0.8rem;
					border-radius: 0.1rem;
					letter-spacing: 0.05rem;
					font-size: 0.3rem;
					font-weight: bold;
					text-align: center;
					line-height: 0.8rem;
				}

				.bt1 {
					border: 1px solid #EEE;
					background: #FFF;
					color: #999;
					margin-right: 0.2rem;
				}

				.bt2 {
					border: none;
					background: #6CBF20;
					color: #FFF;
				}

			}
		}
	}

</style>
